<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    body {
      margin: 0;
    }

    #cesiumContainer {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer">
  </div>
  <div id="vueContainer">
  </div>
  <template id="content">
    <div style="position:absolute; top: 0">
      <!-- <div @click="getLaLo">123</div> -->
      <button @click="getLong">添加点</button>
    </div>
  </template>
  <script src="./index.js"></script>
  <script src="variable.js"></script>
  <script src="ac-min.js"></script>
  <script>
    const { createApp, ref, onMounted, onBeforeUnmount } = Vue
    const app = createApp({
      template: `#content`,
      setup() {

        // var canvas = viewer.scene.canvas;
        // var handler = new Cesium.ScreenSpaceEventHandler(canvas);


        // //获取地图对象
        // var canvas = viewer.scene.canvas;
        // var handler = new Cesium.ScreenSpaceEventHandler(canvas);

        // const getLaLo = () => {
        //   handler.setInputAction(function (lclickment) {
        //     var scene = viewer.scene;
        //     var ellipsoid = scene.globe.ellipsoid;
        //     //var cartesian = LoadCesium.Viewer.camera.pickEllipsoid(lclickment.position, ellipsoid);
        //     var cartesian = viewer.scene.pickPosition(lclickment.position);
        //     positionPick = cartesian;
        //     var pinBuilder = new Cesium.PinBuilder();
        //     if (cartesian) {
        //       var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        //       lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(7);
        //       lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(7);
        //       //地理高度
        //       //height = (cartographic.height+1).toFixed(2);
        //       //相机高度
        //       height = viewer.camera.positionCartographic.height.toFixed(0);
        //       //方向   围绕Z轴旋转
        //       heading = Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2);
        //       //倾斜角度   围绕Y轴旋转
        //       pitch = Cesium.Math.toDegrees(viewer.camera.pitch).toFixed(2);
        //       //围绕X轴旋转
        //       roll = Cesium.Math.toDegrees(viewer.camera.roll).toFixed(2);
        //       //创建盒子
        //       var redBox = viewer.entities.add({
        //         name: 'Red box with black outline',
        //         position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
        //         box: {
        //           dimensions: new Cesium.Cartesian3(3.0, 3.0, 3.0),
        //           material: Cesium.Color.RED.withAlpha(0.5),
        //           outline: true,
        //           outlineColor: Cesium.Color.BLACK
        //         }
        //       });
        //       viewer.zoomTo(viewer.entities)
        //       removeLeftClick()
        //       console.log('lon:' + lon + ";" + 'lat:' + lat + ";" + 'height:' + height);
        //       console.log('heading:' + heading + ';' + 'pitch:' + pitch + ';' + 'roll:' + roll)
        //     }
        //   }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        // }

        const positions = ref([]);//记录点
        const polylines = ref(null);//记录线

        const getLong = () => {
          // 注册鼠标左击事件
          viewer.screenSpaceEventHandler.setInputAction(function (clickEvent) {
            // 获取鼠标点击位置
            var cartesian = viewer.scene.pickPosition(clickEvent.position);
            // 如果是第一次点击
            if (positions.value.length == 0) {
              // 存储第一个点的位置
              positions.value.push(cartesian);
              // 添加一个点实体并配置点的位置、大小、颜色等信息
              viewer.entities.add({
                position: cartesian,
                point: {
                  pixelSize: 10,
                  color: Cesium.Color.RED
                }
              });
            } else {
              // 存储第二个点的位置
              positions.value.push(cartesian);
              // 添加一个点实体并配置点的位置、大小、颜色等信息
              viewer.entities.add({
                position: cartesian,
                point: {
                  pixelSize: 10,
                  color: Cesium.Color.RED
                }
              });

              // 添加线实体并配置线的位置、颜色等信息
              var lineEntity = viewer.entities.add({
                polyline: {
                  positions: positions.value,
                  // 是否紧贴地面
                  //  clampToGround: true,
                  // lable: {
                  //   text: "距离：" + distance.toFixed(2) + "米",
                  //   font: 'normal 18px SimHei',
                  //   fillColor: Cesium.Color.ORANGE, // 文本颜色
                  //   backgroundColor: Cesium.Color.WHITE, // 背景色
                  //   style: Cesium.LabelStyle.FILL, // 文本样式，轮廓
                  // },
                  width: 3,
                  material: Cesium.Color.BLUE,
                },
              });
              
              // 计算距离
              var distance = Cesium.Cartesian3.distance(positions.value[0], positions.value[1]);
              console.log("距离：" + distance.toFixed(2) + "米");

     

              // 清除点的位置信息
              positions.value = [];
            }
          }, Cesium.ScreenSpaceEventType.LEFT_CLICK);//表示鼠标左键单击事件。
        }


        return {
          // getLaLo
          getLong
        }
      },

    })
    app.mount('#vueContainer')
  </script>
</body>

</html>